<template>
    <div class="bottomar" @click="handleClick">
        <div>
            <img :src="userInfo?.memberPicture" class="fx" />
            <a-typography-text class="bl">
                {{ userInfo.memberName }}
            </a-typography-text>
        </div>
        <van-icon name="arrow" class="rightLine" />
    </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()

const userInfo = ref({})
onBeforeMount(async () => {
    userInfo.value = JSON.parse(localStorage.getItem('userInfo'))
})

const handleClick = async () => {
    router.push({ path: '/userCenter' })
}

</script>

<style scoped lang='less'>
.bottomar {
    width: 100%;
    padding: 15px;
    justify-content: space-between;
    align-items: center;
    display: flex;
    border-bottom: 1px solid #ccc;

    .fx {
        width: 80px;
        height: 60px;
        border-radius: 10px;
    }

    .bl {
        font-size: 16px;
        font-weight: bold;
        margin-left: 10px;
    }

    .rightLine {
        font-size: 20px;
    }
}
</style>